import React, { Component } from "react";
import { TabBar } from "antd-mobile";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";

const Item = TabBar.Item;

class Footer extends Component {
  static propTypes = {
    navList: PropTypes.array.isRequired
  };
  render() {
    let { navList } = this.props;
    let path = this.props.location.pathname; // 请求的path
    if (path.indexOf("/billBoard") > -1) {
      path = "/ranking";
    }
    return (
      <div className="sticky-footer">
        <TabBar>
          {navList.map(nav => (
            <Item
              icon={{ uri: require(`./images/${nav.icon}.svg`) }}
              selectedIcon={{
                uri: require(`./images/${nav.icon}-selected.svg`)
              }}
              selected={path === nav.path}
              key={nav.path}
              title={nav.text}
              onPress={() => this.props.history.replace(nav.path)}
            />
          ))}
        </TabBar>
      </div>
    );
  }
}
export default withRouter(Footer);
